<template>
	<view class="wish-detail">
		<view class='list-con'>
			<image mode="widthFix" :src="details.configurePic"></image>
			<view class='c-title'>
				<view class='t-header'>{{details.modelName}}</view>
				<view class='t-sub'>
					<view class='sub-list'>{{details.modelConfigureName}} | </view>
					<view class='sub-list'>{{details.colorName}}</view>
				</view>
				<view class='price-detail'>价格明细</view>
				<view class='d-header'>
					<view class='h-title'>{{details.seriesName}}</view>
				</view>
				<view class='d-header'>
					<view class='h-title'>{{details.modelName}}</view>
				</view>
				<view class='d-sub-header'>
					<view class='h-title'>{{details.modelConfigureName}}</view>
					<view class='h-price'>+ ￥{{details.modelConfigureMoney}}</view>
				</view>
				<view class='d-sub-header'>
					<view class='h-title'>{{details.colorName}}</view>
					<view class='h-price'>+ ￥{{details.colorMoney}}</view>
				</view>
				<view class='d-sub-header'>
					<view class='h-title'>选装包</view>
					<view class='h-price'>+ ￥{{details.servicepkgMoney}}</view>
				</view>
				<view class='d-sub-header sub-color' v-for='item in details.servicepkgInfos' :key='item.id'>
					<view class='h-title'>{{item.serverName}}</view>
					<view class='h-price'>￥{{item.serverMoney}}</view>
				</view>
				<view class='d-sub-header'>
					<view class='h-title'>个性化</view>
					<view class='h-price'>+ ￥{{details.uniqueserverMoney}}</view>
				</view>
				<view class='d-sub-header sub-color' v-for='item in details.uniqueserverInfos' :key='item.id'>
					<view class='h-title'>{{item.serverName}}</view>
					<view class='h-price'>￥{{item.serverMoney}}</view>
				</view>
				<view class='total'>
					<view class='total-header'>总价</view>
					<view class='total-price'>￥{{details.orderAmount}}</view>
				</view>
			</view>
		</view>
		<view class='w-footer'>
			<view class='f-delete' @click='deleteItem()'>删除</view>
			<view class='f-edit' @click='toOrderDetail'>编辑</view>
			<view class='f-pay' @click='toOrderPay'>立即订购</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	export default {
		data() {
			return {
				id: null,
				details: {},
				subList: ['智享版', '珍珠白', '双缸发动机', '水冷', '前后碟刹', '拉力车', '四冲程']
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.id = options.id
			this.getDetail()
		},
		onShow: function() {

		},
		methods: {
			getDetail() {
				let url = app.globalData.config.interfaces.URL_CAR_WISH_GET
				network.get(url, {id: this.id}, 'form').then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						this.details = res.data
					}
				})
			},
			
			toOrderDetail() {
				uni.navigateTo({
					url: `/module_car/pages/carReservation/carReservation?wishId=${this.id}&from=心愿单编辑`
				});
			},
			
			toOrderPay() {
				uni.navigateTo({
					url: `/module_car/pages/orderConfirm/orderConfirm?wishId=${this.id}&from=心愿单转订单`
				});
			},

			deleteItem() {
				let _this = this
				uni.showModal({
					title: '删除心愿单',
					content: '您确认要删除心愿单吗?',
					confirmColor: '#EA5404',
					success: function (res) {
						if (res.confirm) {
							let url = app.globalData.config.interfaces.URL_CAR_ORDER_CONFIGURE_DELETE
							network.post(url, {id: _this.id}, 'form').then(res => {
								if (res.code == 200) {
									uni.showToast({
										title:'删除成功!',
										duration: 3000,
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 500)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				
			},

		},
	}
</script>

<style>
	@import "./wishDetail.css";
</style>
